Motion >> Repos - motion-next.git/blob

   1 <div
   2   id="integrations-salesforceAccount"
   3   class="page-layout simple tabbed"
   4   layout="column"
   5 >
   6   <!-- HEADER -->
   7   <div class="header md-accent-bg" layout="row" layout-align="start center">
   8     <div class="white-fg" layout="row" layout-align="start center" flex>
   9       <md-button
  10         class="goto-salesforceAccounts-button md-icon-button"
  11         aria-label="Go to salesforceAccounts"
  12         ng-click="vm.gotoSalesforceAccounts()"
  13         translate
  14         translate-attr-aria-label="INTEGRATIONS.GO_TO_SALESFORCEACCOUNTS"
  15       >
  16         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  17       </md-button>
  18
  19       <div layout="row" layout-align="start center">
  20         <div class="salesforceAccount-image" hide-xs>
  21           <img ng-src="assets/images/business/salesforceAccounts.jpg" />
  22         </div>
  23
  24         <div layout="column" layout-align="start start">
  25           <div class="h2">
  26             #{{vm.salesforceAccount.id}}
  27             <span ng-if="vm.salesforceAccount.name"
  28               >{{vm.salesforceAccount.name}}</span
  29             >
  30           </div>
  31           <div class="subtitle secondary-text">
  32             <span translate="INTEGRATIONS.CREATED_AT"></span>
  33             <span>{{vm.salesforceAccount.createdAt | date:'medium'}}</span>
  34           </div>
  35         </div>
  36       </div>
  37     </div>
  38     <div>
  39       <md-button
  40         type="submit"
  41         ng-click="vm.saveSalesforceAccount()"
  42         ng-if="vm.crudPermissions.canEdit"
  43         class="send-button md-accent md-raised"
  44         ng-disabled="(generalForm.$invalid) || (configurationsForm.$invalid)"
  45         translate="INTEGRATIONS.SAVE"
  46         translate-attr-aria-label="INTEGRATIONS.SAVE"
  47       >
  48         SAVE
  49       </md-button>
  50     </div>
  51   </div>
  52   <!-- / HEADER -->
  53
  54   <!-- CONTENT -->
  55   <div class="content">
  56     <md-tabs
  57       md-selected="vm.selectedTab"
  58       md-stretch-tabs="always"
  59       flex
  60       layout-fill
  61       md-dynamic-height
  62     >
  63       <md-tab>
  64         <md-tab-label>
  65           <span translate="INTEGRATIONS.ACCOUNT">ACCOUNT</span>
  66         </md-tab-label>
  67         <md-tab-body>
  68           <div
  69             class="salesforceAccount-detail-form-container general md-background-bg md-whiteframe-1dp"
  70           >
  71             <div class="pb-16" layout="row" layout-align="start center">
  72               <div class="h2 secondary-text" translate="INTEGRATIONS.GENERAL">
  73                 GENERAL
  74               </div>
  75             </div>
  76             <form name="generalForm" novalidate>
  77               <md-input-container class="md-block">
  78                 <label translate="INTEGRATIONS.NAME">Name</label>
  79                 <input
  80                   type="text"
  81                   name="name"
  82                   ng-model="vm.salesforceAccount.name"
  83                   ng-required="true"
  84                   autofocus
  85                   ng-disabled="!vm.crudPermissions.canEdit"
  86                 />
  87
  88                 <div
  89                   ng-messages="generalForm['name'].$error"
  90                   ng-show="generalForm['name'].$touched"
  91                   role="alert"
  92                 >
  93                   <div ng-message="required">
  94                     <span translate="INTEGRATIONS.ERRORS.NAME_REQUIRED"
  95                       >Name field is required</span
  96                     >
  97                   </div>
  98                 </div>
  99               </md-input-container>
 100               <md-input-container class="md-block">
 101                 <label translate="INTEGRATIONS.TYPE">Type</label>
 102                 <md-select
 103                   name="type"
 104                   ng-model="vm.salesforceAccount.type"
 105                   required
 106                   ng-disabled="!vm.crudPermissions.canEdit"
 107                 >
 108                   <md-option ng-value="'integrationTab'">
 109                     {{ 'INTEGRATIONS.INTEGRATION_TAB' | translate }}
 110                   </md-option>
 111
 112                   <md-option ng-value="'newTab'">
 113                     {{ 'INTEGRATIONS.NEW_TAB' | translate }}
 114                   </md-option>
 115                 </md-select>
 116                 <div
 117                   ng-messages="generalForm['type'].$error"
 118                   ng-show="generalForm['type'].$touched"
 119                   role="alert"
 120                 >
 121                   <div ng-message="required">
 122                     <span translate="INTEGRATIONS.ERRORS.TYPE_REQUIRED"
 123                       >Type field is required</span
 124                     >
 125                   </div>
 126                 </div>
 127               </md-input-container>
 128               <md-input-container class="md-block">
 129                 <label translate="INTEGRATIONS.USERNAME">Username</label>
 130                 <input
 131                   type="text"
 132                   name="username"
 133                   ng-model="vm.salesforceAccount.username"
 134                   ng-required="true"
 135                   ng-disabled="!vm.crudPermissions.canEdit"
 136                 />
 137
 138                 <div
 139                   ng-messages="generalForm['username'].$error"
 140                   ng-show="generalForm['username'].$touched"
 141                   role="alert"
 142                 >
 143                   <div ng-message="required">
 144                     <span translate="INTEGRATIONS.ERRORS.USERNAME_REQUIRED"
 145                       >Username field is required</span
 146                     >
 147                   </div>
 148                 </div>
 149               </md-input-container>
 150               <md-input-container class="md-block">
 151                 <label translate="INTEGRATIONS.URI">Uri</label>
 152                 <input
 153                   type="url"
 154                   name="remoteUri"
 155                   ng-model="vm.salesforceAccount.remoteUri"
 156                   ng-required="true"
 157                   ng-disabled="!vm.crudPermissions.canEdit"
 158                 />
 159
 160                 <div
 161                   ng-messages="generalForm['remoteUri'].$error"
 162                   ng-show="generalForm['remoteUri'].$touched"
 163                   role="alert"
 164                 >
 165                   <div ng-message="required">
 166                     <span translate="INTEGRATIONS.ERRORS.URI_REQUIRED"
 167                       >Uri field is required</span
 168                     >
 169                   </div>
 170                   <div ng-message="url">
 171                     <span translate="INTEGRATIONS.ERRORS.URI_MUST_VALID_URL"
 172                       >Uri must be a valid url http://www.xcally.com</span
 173                     >
 174                   </div>
 175                 </div>
 176               </md-input-container>
 177               <md-input-container class="md-block">
 178                 <label translate="INTEGRATIONS.PASSWORD">Password</label>
 179                 <input
 180                   type="password"
 181                   name="password"
 182                   ng-model="vm.salesforceAccount.password"
 183                   placeholder="Password"
 184                   translate
 185                   translate-attr-placeholder="INTEGRATIONS.PASSWORD"
 186                   required
 187                 />
 188                 <div ng-messages="generalForm['password'].$error" role="alert">
 189                   <div ng-message="required">
 190                     <span translate="INTEGRATIONS.ERRORS.PASSWORD_REQUIRED"
 191                       >Password field is required</span
 192                     >
 193                   </div>
 194                   <div ng-message="pattern">
 195                     <span
 196                       translate="INTEGRATIONS.ERRORS.SECURE_PASSWORD_PATTERN"
 197                       >Must contain at least 8 characters, with a minimum of 1
 198                       lowercase letter, 1 uppercase letter, 1 numeric character
 199                       and 1 special character ~!?*@#$%^&-_=+[{]}.</span
 200                     >
 201                   </div>
 202                 </div>
 203               </md-input-container>
 204
 205               <md-input-container class="md-block">
 206                 <label translate="INTEGRATIONS.CLIENTID">ClientId</label>
 207                 <input
 208                   type="text"
 209                   name="clientId"
 210                   ng-model="vm.salesforceAccount.clientId"
 211                   ng-required="true"
 212                   ng-disabled="!vm.crudPermissions.canEdit"
 213                 />
 214
 215                 <div
 216                   ng-messages="generalForm['clientId'].$error"
 217                   ng-show="generalForm['clientId'].$touched"
 218                   role="alert"
 219                 >
 220                   <div ng-message="required">
 221                     <span translate="INTEGRATIONS.ERRORS.CLIENTID_REQUIRED"
 222                       >ClientId field is required</span
 223                     >
 224                   </div>
 225                 </div>
 226               </md-input-container>
 227               <md-input-container class="md-block">
 228                 <label translate="INTEGRATIONS.CLIENTSECRET"
 229                   >ClientSecret</label
 230                 >
 231                 <input
 232                   type="text"
 233                   name="clientSecret"
 234                   ng-model="vm.salesforceAccount.clientSecret"
 235                   ng-required="true"
 236                   ng-disabled="!vm.crudPermissions.canEdit"
 237                 />
 238
 239                 <div
 240                   ng-messages="generalForm['clientSecret'].$error"
 241                   ng-show="generalForm['clientSecret'].$touched"
 242                   role="alert"
 243                 >
 244                   <div ng-message="required">
 245                     <span translate="INTEGRATIONS.ERRORS.CLIENTSECRET_REQUIRED"
 246                       >ClientSecret field is required</span
 247                     >
 248                   </div>
 249                 </div>
 250               </md-input-container>
 251               <md-input-container class="md-block">
 252                 <label translate="INTEGRATIONS.SECURITYTOKEN"
 253                   >SecurityToken</label
 254                 >
 255                 <input
 256                   type="text"
 257                   name="securityToken"
 258                   ng-model="vm.salesforceAccount.securityToken"
 259                   ng-required="true"
 260                   ng-disabled="!vm.crudPermissions.canEdit"
 261                 />
 262
 263                 <div
 264                   ng-messages="generalForm['securityToken'].$error"
 265                   ng-show="generalForm['securityToken'].$touched"
 266                   role="alert"
 267                 >
 268                   <div ng-message="required">
 269                     <span translate="INTEGRATIONS.ERRORS.SECURITYTOKEN_REQUIRED"
 270                       >SecurityToken field is required</span
 271                     >
 272                   </div>
 273                 </div>
 274               </md-input-container>
 275               <md-input-container class="md-block">
 276                 <label translate="INTEGRATIONS.MOTIONPROXYADDRESS"
 277                   >MotionProxyAddress</label
 278                 >
 279                 <input
 280                   type="url"
 281                   name="serverUrl"
 282                   ng-model="vm.salesforceAccount.serverUrl"
 283                   ng-disabled="!vm.crudPermissions.canEdit"
 284                 />
 285
 286                 <div class="hint">
 287                   <span translate="INTEGRATIONS.HELP.MOTIONPROXYADDRESS"></span>
 288                 </div>
 289                 <div
 290                   ng-messages="generalForm['serverUrl'].$error"
 291                   ng-show="generalForm['serverUrl'].$touched"
 292                   role="alert"
 293                 >
 294                   <div ng-message="required">
 295                     <span
 296                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_REQUIRED"
 297                       >MotionProxyAddress field is required</span
 298                     >
 299                   </div>
 300                   <div ng-message="url">
 301                     <span
 302                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_MUST_VALID_URL"
 303                       >MotionProxyAddress must be a valid url
 304                       http://www.xcally.com</span
 305                     >
 306                   </div>
 307                 </div>
 308               </md-input-container>
 309               <md-input-container class="md-block">
 310                 <label translate="INTEGRATIONS.DESCRIPTION">Description</label>
 311                 <input
 312                   type="text"
 313                   name="description"
 314                   ng-model="vm.salesforceAccount.description"
 315                   ng-disabled="!vm.crudPermissions.canEdit"
 316                 />
 317
 318                 <div
 319                   ng-messages="generalForm['description'].$error"
 320                   ng-show="generalForm['description'].$touched"
 321                   role="alert"
 322                 >
 323                   <div ng-message="required">
 324                     <span translate="INTEGRATIONS.ERRORS.DESCRIPTION_REQUIRED"
 325                       >Description field is required</span
 326                     >
 327                   </div>
 328                 </div>
 329               </md-input-container>
 330             </form>
 331           </div>
 332         </md-tab-body>
 333       </md-tab>
 334       <md-tab>
 335         <md-tab-label>
 336           <span translate="INTEGRATIONS.CONFIGURATIONS">CONFIGURATIONS</span>
 337         </md-tab-label>
 338         <md-tab-body>
 339           <div
 340             class="salesforceAccount-detail-form-container configurations md-background-bg md-whiteframe-1dp"
 341           >
 342             <div class="pb-16" layout="row" layout-align="start center">
 343               <div
 344                 class="h2 secondary-text"
 345                 translate="INTEGRATIONS.CONFIGURATIONS"
 346               >
 347                 CONFIGURATIONS
 348               </div>
 349             </div>
 350             <div
 351               ng-controller="SalesforceAccountConfigurationsController as vm_cc"
 352               ng-init="vm_cc.init(vm.salesforceAccount, vm.crudPermissions)"
 353               layout="row"
 354             >
 355               <md-card class="md-whiteframe-1dp" flex="30">
 356                 <div layout="row" layout-align="center center">
 357                   <md-subheader flex="75" class="md-no-sticky"
 358                     >{{ 'INTEGRATIONS.CONFIGURATIONS' | translate
 359                     }}</md-subheader
 360                   >
 361                   <md-button
 362                     flex="25"
 363                     ng-if="vm_cc.crudPermissions.canEdit"
 364                     ng-click="vm_cc.createOrEditSalesforceConfiguration($event)"
 365                     class="md-icon-button"
 366                     aria-label="create salesforceConfiguration"
 367                   >
 368                     <md-icon md-font-icon="icon-plus"></md-icon>
 369                   </md-button>
 370                 </div>
 371                 <md-list>
 372                   <md-list-item
 373                     layout="row"
 374                     layout-align="center center"
 375                     ng-repeat="salesforceConfiguration in vm_cc.configurations"
 376                     class="border-top"
 377                     md-colors="{background: (vm_cc.selectedSalesforceConfiguration == $index ? 'accent' : 'grey-A100')}"
 378                     ng-click="vm_cc.getSalesforceConfiguration($index)"
 379                   >
 380                     <span class="text-truncate" flex="80"
 381                       >{{ salesforceConfiguration.name }}</span
 382                     >
 383                     <md-menu ng-if="vm_cc.crudPermissions.canDelete">
 384                       <md-button
 385                         class="md-icon-button"
 386                         aria-label="More"
 387                         translate
 388                         translate-attr-aria-label="INTEGRATIONS.MORE"
 389                         ng-click="$mdOpenMenu($event)"
 390                       >
 391                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 392                       </md-button>
 393                       <md-menu-content width="3">
 394                         <md-menu-item ng-if="vm_cc.crudPermissions.canDelete">
 395                           <md-button
 396                             ng-click="vm_cc.deleteSalesforceConfiguration($event, salesforceConfiguration)"
 397                             translate="INTEGRATIONS.DELETE_SALESFORCECONFIGURATION"
 398                           >
 399                             Delete SalesforceConfiguration
 400                           </md-button>
 401                         </md-menu-item>
 402                       </md-menu-content>
 403                     </md-menu>
 404                   </md-list-item>
 405                 </md-list>
 406               </md-card>
 407               <div flex></div>
 408               <md-card class="md-whiteframe-1dp" flex="65">
 409                 <md-tabs ng-if="vm_cc.configurations.length" md-dynamic-height>
 410                   <md-tab>
 411                     <md-tab-label>
 412                       <span translate="INTEGRATIONS.SUBJECTS">SUBJECTS</span>
 413                     </md-tab-label>
 414                     <md-tab-body>
 415                       <md-toolbar
 416                         class="md-table-toolbar md-default no-padding"
 417                         ng-hide="vm_cc.selectedSubjects.length"
 418                       >
 419                         <div class="md-toolbar-tools">
 420                           <div flex></div>
 421                           <ms-search-bar
 422                             on-search="vm_cc.query.subject = query"
 423                             on-collapse="vm_cc.query.subject = undefined"
 424                             debounce="300"
 425                           ></ms-search-bar>
 426                           <md-button
 427                             ng-if="vm_cc.crudPermissions.canEdit"
 428                             class="md-icon-button"
 429                             ng-click="vm_cc.createOrEditSubject($event)"
 430                             aria-label="add subject"
 431                             translate
 432                             translate-attr-label="INTEGRATIONS.ADD_SUBJECT"
 433                           >
 434                             <md-icon md-font-icon="icon-plus"></md-icon>
 435                           </md-button>
 436                         </div>
 437                       </md-toolbar>
 438                       <md-toolbar
 439                         class="md-table-toolbar md-accent"
 440                         ng-show="vm_cc.selectedSubjects.length"
 441                       >
 442                         <div class="md-toolbar-tools">
 443                           <span class="md-subhead"
 444                             >{{vm_cc.selectedSubjects.length}}
 445                             {{vm_cc.selectedSubjects.length > 1 ? 'items' :
 446                             'item'}} selected</span
 447                           >
 448                           <div flex></div>
 449                           <md-button
 450                             ng-if="vm_cc.crudPermissions.canDelete"
 451                             class="md-icon-button"
 452                             ng-click="vm_cc.deleteSelectedSubjects($event)"
 453                             aria-label="delete selected"
 454                             translate
 455                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 456                           >
 457                             <md-icon md-font-icon="icon-delete"></md-icon>
 458                           </md-button>
 459                         </div>
 460                       </md-toolbar>
 461                       <md-table-container
 462                         class="md-whiteframe-1dp padding-horizontal"
 463                       >
 464                         <table
 465                           md-table
 466                           md-row-select
 467                           multiple
 468                           ng-model="vm_cc.selectedSubjects"
 469                         >
 470                           <thead md-head>
 471                             <tr md-row>
 472                               <th md-column>
 473                                 {{ 'INTEGRATIONS.ID' | translate }}
 474                               </th>
 475                               <th md-column>
 476                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 477                               </th>
 478                               <th md-column>
 479                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 480                               </th>
 481                               <th md-column width="10px"></th>
 482                             </tr>
 483                           </thead>
 484                           <tbody md-body>
 485                             <tr
 486                               md-row
 487                               md-select="subject"
 488                               md-select-id="id"
 489                               ng-repeat="subject in vm_cc.subjects | filter: vm_cc.query.subject"
 490                             >
 491                               <td
 492                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 493                                 md-cell
 494                                 class="id"
 495                               >
 496                                 {{subject.id}}
 497                               </td>
 498                               <td
 499                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 500                                 md-cell
 501                                 class="type"
 502                               >
 503                                 <span ng-if="subject.FieldId"
 504                                   >{{subject.nameField ||
 505                                   subject.idField}}</span
 506                                 >
 507                                 <span ng-if="!subject.FieldId"
 508                                   >{{subject.type}}</span
 509                                 >
 510                               </td>
 511                               <td
 512                                 ng-switch="subject.type"
 513                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 514                                 md-cell
 515                               >
 516                                 <span ng-switch-when="string"
 517                                   >{{subject.content}}</span
 518                                 >
 519                                 <span
 520                                   ng-switch-when="variable"
 521                                   class="text-boxed"
 522                                   >{{subject.variableName}}</span
 523                                 >
 524                                 <span
 525                                   ng-switch-when="customVariable"
 526                                   class="text-boxed"
 527                                   >{{
 528                                   vm_cc.variablesById[subject.VariableId].name
 529                                   }}</span
 530                                 >
 531                                 <span ng-switch-when="keyValue">
 532                                   {{subject.key}}
 533                                   <span ng-switch="description.keyType">
 534                                     <span ng-switch-when="string"
 535                                       >{{subject.keyContent}}</span
 536                                     >
 537                                     <span
 538                                       ng-switch-when="variable"
 539                                       class="text-boxed"
 540                                       >{{subject.variableName}}</span
 541                                     >
 542                                     <span
 543                                       ng-switch-when="customVariable"
 544                                       class="text-boxed"
 545                                       >{{
 546                                       vm_cc.variablesById[subject.VariableId].name
 547                                       }}</span
 548                                     >
 549                                   </span>
 550                                 </span>
 551                                 <span ng-switch-default
 552                                   >{{subject.content}}</span
 553                                 >
 554                               </td>
 555                               <td
 556                                 md-cell
 557                                 class="actions"
 558                                 ng-if="!vm_cc.crudPermissions.readOnly"
 559                               >
 560                                 <md-menu>
 561                                   <md-button
 562                                     class="md-icon-button"
 563                                     aria-label="More"
 564                                     translate
 565                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 566                                     ng-click="$mdOpenMenu($event)"
 567                                   >
 568                                     <md-icon
 569                                       md-font-icon="icon-dots-vertical"
 570                                     ></md-icon>
 571                                   </md-button>
 572
 573                                   <md-menu-content width="3">
 574                                     <md-menu-item
 575                                       ng-if="vm_cc.crudPermissions.canEdit"
 576                                     >
 577                                       <md-button
 578                                         ng-click="vm_cc.createOrEditSubject($event, subject)"
 579                                         translate="INTEGRATIONS.EDIT_SUBJECT"
 580                                       >
 581                                         Edit Subject
 582                                       </md-button>
 583                                     </md-menu-item>
 584                                     <md-menu-item
 585                                       ng-if="vm_cc.crudPermissions.canDelete"
 586                                     >
 587                                       <md-button
 588                                         ng-click="vm_cc.deleteSubjectConfirm($event, subject)"
 589                                         translate="INTEGRATIONS.DELETE_SUBJECT"
 590                                       >
 591                                         Delete Subject
 592                                       </md-button>
 593                                     </md-menu-item>
 594                                   </md-menu-content>
 595                                 </md-menu>
 596                               </td>
 597                             </tr>
 598                           </tbody>
 599                         </table>
 600                       </md-table-container>
 601                     </md-tab-body>
 602                   </md-tab>
 603
 604                   <md-tab>
 605                     <md-tab-label>
 606                       <span translate="INTEGRATIONS.DESCRIPTIONS"
 607                         >DESCRIPTIONS</span
 608                       >
 609                     </md-tab-label>
 610                     <md-tab-body>
 611                       <md-toolbar
 612                         class="md-table-toolbar md-default no-padding"
 613                         ng-hide="vm_cc.selectedDescriptions.length"
 614                       >
 615                         <div class="md-toolbar-tools">
 616                           <div flex></div>
 617                           <ms-search-bar
 618                             on-search="vm_cc.query.description = query"
 619                             on-collapse="vm_cc.query.description = undefined"
 620                             debounce="300"
 621                           ></ms-search-bar>
 622                           <md-button
 623                             ng-if="vm_cc.crudPermissions.canEdit"
 624                             class="md-icon-button"
 625                             ng-click="vm_cc.createOrEditDescription($event)"
 626                             aria-label="add description"
 627                             translate
 628                             translate-attr-label="INTEGRATIONS.ADD_DESCRIPTION"
 629                           >
 630                             <md-icon md-font-icon="icon-plus"></md-icon>
 631                           </md-button>
 632                         </div>
 633                       </md-toolbar>
 634                       <md-toolbar
 635                         class="md-table-toolbar md-accent"
 636                         ng-show="vm_cc.selectedDescriptions.length"
 637                       >
 638                         <div class="md-toolbar-tools">
 639                           <span class="md-subhead"
 640                             >{{vm_cc.selectedDescriptions.length}}
 641                             {{vm_cc.selectedDescriptions.length > 1 ? 'items' :
 642                             'item'}} selected</span
 643                           >
 644                           <div flex></div>
 645                           <md-button
 646                             ng-if="vm_cc.crudPermissions.canDelete"
 647                             class="md-icon-button"
 648                             ng-click="vm_cc.deleteSelectedDescriptions($event)"
 649                             aria-label="delete selected"
 650                             translate
 651                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 652                           >
 653                             <md-icon md-font-icon="icon-delete"></md-icon>
 654                           </md-button>
 655                         </div>
 656                       </md-toolbar>
 657                       <md-table-container
 658                         class="md-whiteframe-1dp padding-horizontal"
 659                       >
 660                         <table
 661                           md-table
 662                           md-row-select
 663                           multiple
 664                           ng-model="vm_cc.selectedDescriptions"
 665                         >
 666                           <thead md-head>
 667                             <tr md-row>
 668                               <th md-column>
 669                                 {{ 'INTEGRATIONS.ID' | translate }}
 670                               </th>
 671                               <th md-column>
 672                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 673                               </th>
 674                               <th md-column>
 675                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 676                               </th>
 677                               <th md-column width="10px"></th>
 678                             </tr>
 679                           </thead>
 680                           <tbody md-body>
 681                             <tr
 682                               md-row
 683                               md-select="description"
 684                               md-select-id="id"
 685                               ng-repeat="description in vm_cc.descriptions | filter: vm_cc.query.description"
 686                             >
 687                               <td
 688                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 689                                 md-cell
 690                                 class="id"
 691                               >
 692                                 {{description.id}}
 693                               </td>
 694                               <td
 695                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 696                                 md-cell
 697                                 class="type"
 698                               >
 699                                 <span ng-if="description.FieldId"
 700                                   >{{description.nameField ||
 701                                   description.idField}}</span
 702                                 >
 703                                 <span ng-if="!description.FieldId"
 704                                   >{{description.type}}</span
 705                                 >
 706                               </td>
 707                               <td
 708                                 ng-switch="description.type"
 709                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 710                                 md-cell
 711                               >
 712                                 <span ng-switch-when="string"
 713                                   >{{description.content}}</span
 714                                 >
 715                                 <span
 716                                   ng-switch-when="variable"
 717                                   class="text-boxed"
 718                                   >{{description.variableName}}</span
 719                                 >
 720                                 <span
 721                                   ng-switch-when="customVariable"
 722                                   class="text-boxed"
 723                                   >{{
 724                                   vm_cc.variablesById[description.VariableId].name
 725                                   }}</span
 726                                 >
 727                                 <span ng-switch-when="keyValue">
 728                                   {{description.key}}
 729                                   <span ng-switch="description.keyType">
 730                                     <span ng-switch-when="string"
 731                                       >{{description.keyContent}}</span
 732                                     >
 733                                     <span
 734                                       ng-switch-when="variable"
 735                                       class="text-boxed"
 736                                       >{{description.variableName}}</span
 737                                     >
 738                                     <span
 739                                       ng-switch-when="customVariable"
 740                                       class="text-boxed"
 741                                       >{{
 742                                       vm_cc.variablesById[description.VariableId].name
 743                                       }}</span
 744                                     >
 745                                   </span>
 746                                 </span>
 747                                 <span ng-switch-default
 748                                   >{{description.content}}</span
 749                                 >
 750                               </td>
 751                               <td
 752                                 md-cell
 753                                 class="actions"
 754                                 ng-if="!vm_cc.crudPermissions.readOnly"
 755                               >
 756                                 <md-menu>
 757                                   <md-button
 758                                     class="md-icon-button"
 759                                     aria-label="More"
 760                                     translate
 761                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 762                                     ng-click="$mdOpenMenu($event)"
 763                                   >
 764                                     <md-icon
 765                                       md-font-icon="icon-dots-vertical"
 766                                     ></md-icon>
 767                                   </md-button>
 768
 769                                   <md-menu-content width="3">
 770                                     <md-menu-item
 771                                       ng-if="vm_cc.crudPermissions.canEdit"
 772                                     >
 773                                       <md-button
 774                                         ng-click="vm_cc.createOrEditDescription($event, description)"
 775                                         translate="INTEGRATIONS.EDIT_DESCRIPTION"
 776                                       >
 777                                         Edit Description
 778                                       </md-button>
 779                                     </md-menu-item>
 780                                     <md-menu-item
 781                                       ng-if="vm_cc.crudPermissions.canDelete"
 782                                     >
 783                                       <md-button
 784                                         ng-click="vm_cc.deleteDescriptionConfirm($event, description)"
 785                                         translate="INTEGRATIONS.DELETE_DESCRIPTION"
 786                                       >
 787                                         Delete Description
 788                                       </md-button>
 789                                     </md-menu-item>
 790                                   </md-menu-content>
 791                                 </md-menu>
 792                               </td>
 793                             </tr>
 794                           </tbody>
 795                         </table>
 796                       </md-table-container>
 797                     </md-tab-body>
 798                   </md-tab>
 799
 800                   <md-tab>
 801                     <md-tab-label>
 802                       <span translate="INTEGRATIONS.FIELDS">FIELDS</span>
 803                     </md-tab-label>
 804                     <md-tab-body>
 805                       <md-toolbar
 806                         class="md-table-toolbar md-default no-padding"
 807                         ng-hide="vm_cc.selectedFields.length"
 808                       >
 809                         <div class="md-toolbar-tools">
 810                           <div flex></div>
 811                           <ms-search-bar
 812                             on-search="vm_cc.query.field = query"
 813                             on-collapse="vm_cc.query.field = undefined"
 814                             debounce="300"
 815                           ></ms-search-bar>
 816                           <md-button
 817                             ng-if="vm_cc.crudPermissions.canEdit"
 818                             class="md-icon-button"
 819                             ng-click="vm_cc.createOrEditField($event)"
 820                             aria-label="add field"
 821                             translate
 822                             translate-attr-label="INTEGRATIONS.ADD_FIELD"
 823                           >
 824                             <md-icon md-font-icon="icon-plus"></md-icon>
 825                           </md-button>
 826                         </div>
 827                       </md-toolbar>
 828                       <md-toolbar
 829                         class="md-table-toolbar md-accent"
 830                         ng-show="vm_cc.selectedFields.length"
 831                       >
 832                         <div class="md-toolbar-tools">
 833                           <span class="md-subhead"
 834                             >{{vm_cc.selectedFields.length}}
 835                             {{vm_cc.selectedFields.length > 1 ? 'items' :
 836                             'item'}} selected</span
 837                           >
 838                           <div flex></div>
 839                           <md-button
 840                             ng-if="vm_cc.crudPermissions.canDelete"
 841                             class="md-icon-button"
 842                             ng-click="vm_cc.deleteSelectedFields($event)"
 843                             aria-label="delete selected"
 844                             translate
 845                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 846                           >
 847                             <md-icon md-font-icon="icon-delete"></md-icon>
 848                           </md-button>
 849                         </div>
 850                       </md-toolbar>
 851                       <md-table-container
 852                         class="md-whiteframe-1dp padding-horizontal"
 853                       >
 854                         <table
 855                           md-table
 856                           md-row-select
 857                           multiple
 858                           ng-model="vm_cc.selectedFields"
 859                         >
 860                           <thead md-head>
 861                             <tr md-row>
 862                               <th md-column>
 863                                 {{ 'INTEGRATIONS.ID' | translate }}
 864                               </th>
 865                               <th md-column>
 866                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 867                               </th>
 868                               <th md-column>
 869                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 870                               </th>
 871                               <th md-column width="10px"></th>
 872                             </tr>
 873                           </thead>
 874                           <tbody md-body>
 875                             <tr
 876                               md-row
 877                               md-select="field"
 878                               md-select-id="id"
 879                               ng-repeat="field in vm_cc.fields | filter: vm_cc.query.field"
 880                             >
 881                               <td
 882                                 ng-click="vm_cc.createOrEditField($event, field)"
 883                                 md-cell
 884                                 class="id"
 885                               >
 886                                 {{field.id}}
 887                               </td>
 888                               <td
 889                                 ng-click="vm_cc.createOrEditField($event, field)"
 890                                 md-cell
 891                                 class="type"
 892                               >
 893                                 <span ng-if="field.FieldId"
 894                                   >{{field.nameField || field.idField}}</span
 895                                 >
 896                                 <span ng-if="!field.FieldId"
 897                                   >{{field.type}}</span
 898                                 >
 899                               </td>
 900                               <td
 901                                 ng-switch="field.type"
 902                                 ng-click="vm_cc.createOrEditField($event, field)"
 903                                 md-cell
 904                               >
 905                                 <span ng-switch-when="string"
 906                                   >{{field.content}}</span
 907                                 >
 908                                 <span
 909                                   ng-switch-when="variable"
 910                                   class="text-boxed"
 911                                   >{{field.variableName}}</span
 912                                 >
 913                                 <span
 914                                   ng-switch-when="customVariable"
 915                                   class="text-boxed"
 916                                   >{{ vm_cc.variablesById[field.VariableId].name
 917                                   }}</span
 918                                 >
 919                                 <span ng-switch-when="keyValue">
 920                                   {{field.key}}
 921                                   <span ng-switch="description.keyType">
 922                                     <span ng-switch-when="string"
 923                                       >{{field.keyContent}}</span
 924                                     >
 925                                     <span
 926                                       ng-switch-when="variable"
 927                                       class="text-boxed"
 928                                       >{{field.variableName}}</span
 929                                     >
 930                                     <span
 931                                       ng-switch-when="customVariable"
 932                                       class="text-boxed"
 933                                       >{{
 934                                       vm_cc.variablesById[field.VariableId].name
 935                                       }}</span
 936                                     >
 937                                   </span>
 938                                 </span>
 939                                 <span ng-switch-default>{{field.content}}</span>
 940                               </td>
 941                               <td
 942                                 md-cell
 943                                 class="actions"
 944                                 ng-if="!vm_cc.crudPermissions.readOnly"
 945                               >
 946                                 <md-menu>
 947                                   <md-button
 948                                     class="md-icon-button"
 949                                     aria-label="More"
 950                                     translate
 951                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 952                                     ng-click="$mdOpenMenu($event)"
 953                                   >
 954                                     <md-icon
 955                                       md-font-icon="icon-dots-vertical"
 956                                     ></md-icon>
 957                                   </md-button>
 958
 959                                   <md-menu-content width="3">
 960                                     <md-menu-item
 961                                       ng-if="vm_cc.crudPermissions.canEdit"
 962                                     >
 963                                       <md-button
 964                                         ng-click="vm_cc.createOrEditField($event, field)"
 965                                         translate="INTEGRATIONS.EDIT_FIELD"
 966                                       >
 967                                         Edit Field
 968                                       </md-button>
 969                                     </md-menu-item>
 970                                     <md-menu-item
 971                                       ng-if="vm_cc.crudPermissions.canDelete"
 972                                     >
 973                                       <md-button
 974                                         ng-click="vm_cc.deleteFieldConfirm($event, field)"
 975                                         translate="INTEGRATIONS.DELETE_FIELD"
 976                                       >
 977                                         Delete Field
 978                                       </md-button>
 979                                     </md-menu-item>
 980                                   </md-menu-content>
 981                                 </md-menu>
 982                               </td>
 983                             </tr>
 984                           </tbody>
 985                         </table>
 986                       </md-table-container>
 987                     </md-tab-body>
 988                   </md-tab>
 989
 990                   <md-tab>
 991                     <md-tab-label>
 992                       <span translate="INTEGRATIONS.ADVANCED">ADVANCED</span>
 993                     </md-tab-label>
 994                     <md-tab-body>
 995                       <div layout-margin>
 996                         <label translate="INTEGRATIONS.MODULE_SEARCH"></label>
 997                         <md-select
 998                           ng-model="vm_cc.salesforceConfiguration.moduleSearch"
 999                           ng-change="vm_cc.selectChangedAdvanced()"
1000                           ng-disabled="!vm_cc.crudPermissions.canEdit"
1001                         >
1002                           <md-option
1003                             ng-value="option.key"
1004                             ng-repeat="option in [{key: 'contact_lead', value: 'Contact & Lead'}, {key: 'contact', value: 'Contact'}, {key: 'lead', value: 'Lead'}]"
1005                             >{{ option.value }}</md-option
1006                           >
1007                         </md-select>
1008                       </div>
1009                       <div layout-margin>
1010                         <label translate="INTEGRATIONS.MODULE_CREATE"></label>
1011                         <md-select
1012                           ng-model="vm_cc.salesforceConfiguration.moduleCreate"
1013                           ng-change="vm_cc.selectChangedAdvanced()"
1014                           ng-disabled="!vm_cc.crudPermissions.canEdit"
1015                         >
1016                           <md-option
1017                             ng-value="option.key"
1018                             ng-repeat="option in [{key: 'nothing', value: 'Nothing'}, {key: 'contact', value: 'Contact'}, {key: 'lead', value: 'Lead'}]"
1019                             >{{ option.value }}</md-option
1020                           >
1021                         </md-select>
1022                       </div>
1023                     </md-tab-body>
1024                   </md-tab>
1025                 </md-tabs>
1026                 <div
1027                   class="padding-20"
1028                   ng-if="!vm_cc.configurations.length && vm_cc.crudPermissions.canEdit"
1029                   ng-click="vm_cc.createOrEditSalesforceConfiguration($event)"
1030                   layout="row"
1031                   layout-sm="column"
1032                   layout-align="center center"
1033                   layout-wrap
1034                 >
1035                   <div
1036                     class="padding-20 md-whiteframe-3dp md-accent-bg"
1037                     layout="column"
1038                     layout-align="center center"
1039                   >
1040                     <md-button class="md-icon-button">
1041                       <md-icon md-font-icon="icon-plus"></md-icon>
1042                     </md-button>
1043                     <span
1044                       aria-label="add configuration"
1045                       translate
1046                       translate-attr-label="INTEGRATIONS.ADD_CONFIGURATION"
1047                       >ADD CONFIGURATION</span
1048                     >
1049                   </div>
1050                 </div>
1051               </md-card>
1052             </div>
1053           </div>
1054         </md-tab-body>
1055       </md-tab>
1056     </md-tabs>
1057   </div>
1058   <!-- / CONTENT -->
1059 </div>